<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: shen
  Date: 2019/8/14
  Time: 21:57
  To change this template use File | Settings | File Templates.
--%>

<!DOCTYPE html>
<html lang="en">
<head>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../image/favicon.ico" type="image/ico"/>

    <title>贵美后台管理系统</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrapcss/bootstrap.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../css/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../css/vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../css/vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href="../css/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href="../css/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link href="../css/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../css/build/css/custom.min.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        /*#container1{*/
        /*display: flex;*/
        /*}*/
        /*#month{*/
        /*float: left;*/
        /*}*/
        /*#quarter{*/
        /*float: left;*/
        /*}*/
        /*#year{*/
        /*float: left;*/
        /*}*/
        #container2{
            display: flex;
        }
        #columnar{
            float: left;
        }
        #line{
            float: left;
        }
        #line2{
            float: left;
        }
    </style>
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">

        <jsp:include page="left.jsp"/>

        <!-- top navigation -->
        <jsp:include page="top.jsp"/>
        <!-- /top navigation -->

        <!-- page content -->


                <div class="right_col" role="main">
                    <div class="wrapper wrapper-content animated fadeInRight ecommerce">

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>交易量数据</h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                            <i class="fa fa-wrench"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Settings 1</a>
                                            </li>
                                            <li><a href="#">Settings 2</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                            <div class="row">
                                <div class="col-md-4">
                                    <div id="month" style="height: 290px"></div>
                                </div>
                                <div class="col-md-4">
                                    <div id="quarter" style="height: 320px"></div>
                                </div>
                                <div class="col-md-4">
                                    <div id="year" style="height: 290px"></div>
                                </div>
                            </div>
                            <%--<div id="container1">--%>
                                <%--<div id="month" style="width:33.3%;height: 290px">--%>
                                <%--</div>--%>
                                <%--<div id="quarter" style="width:33.3%;height: 320px"></div>--%>
                                <%--<div id="year" style="width:33.3%;height: 290px"></div>--%>
                            <%--</div>--%>
                            <div id="container2">
                                <%--<div class="x_content" >--%>
                                    <div id="columnar"style="width:33.3%;height: 320px">
                                    <div class="row">
                                        <div class="col-md-11">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">月季交易量统计表</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>月份</th>
                                                            <c:forEach var="monthTrade" items="${requestScope.tradeMonthDetails}" varStatus="status">
                                                                <c:if test="${monthTrade gt 0}"><th>${status.index}</th></c:if>
                                                            </c:forEach>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>交易量</td>
                                                            <c:forEach var="monthTrade" items="${requestScope.tradeMonthDetails}" varStatus="status">
                                                                <c:if test="${monthTrade gt 0}"><td>${monthTrade}</td></c:if>
                                                            </c:forEach>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    </div>

                                <div id="line" style="width:33.3%;height: 320px">
                                    <div class="row">
                                        <div class="col-md-11">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">季度交易量统计表</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>季度</th>
                                                            <c:forEach var="quarterTrade" items="${requestScope.tradeQuarterDetails}" varStatus="status">
                                                                <c:if test="${quarterTrade gt 0}"><th>${status.index}</th></c:if>
                                                            </c:forEach>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>交易量</td>
                                                            <c:forEach var="quarterTrade" items="${requestScope.tradeQuarterDetails}" varStatus="status">
                                                                <c:if test="${quarterTrade gt 0}"><td>${quarterTrade}</td></c:if>
                                                            </c:forEach>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="line2" style="width:33.3%;height: 320px">
                                    <div class="row">
                                        <div class="col-md-11">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">年度交易量统计表</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <table class="table">
                                                        <thead>
                                                        <tr>
                                                            <th>年份</th>
                                                            <c:forEach var="yearTrade" items="${sessionScope.tradeYearDetails}" varStatus="status">
                                                                <th>${yearTrade.trd_year}</th>
                                                            </c:forEach>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>交易量</td>
                                                            <c:forEach var="yearTrade" items="${sessionScope.tradeYearDetails}" varStatus="status">
                                                                <td>${yearTrade.year_quantity}</td>
                                                            </c:forEach>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <%--</div>--%>

                        </div>
                            </div>

                    </div>
                </div>


            </div>

            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
            <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

            <script type="text/javascript">
                var dom = document.getElementById("quarter");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title: {
                        text: '商品季度交易量情况统计',
                        subtext: '贵美数据',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['一季度','二季度','三季度','四季度' ]
                    },
                    yAxis: {
                        type: 'value'
                    },

                    series: [{

                        data: [<c:forEach var="quarterTrade" items="${requestScope.tradeQuarterDetails}" varStatus="status">${quarterTrade}<c:if test="${not status.last}">,</c:if></c:forEach>],

                        type: 'line',
                        areaStyle: {}

                    }]

                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            </script>
            <script type="text/javascript">
                var dom = document.getElementById("month");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                app.title = '坐标轴刻度与标签对齐';

                option = {
                    title: {
                        text: '商品月季交易量情况统计',
                        subtext: '贵美数据',
                        left: 'center'
                    },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'直接访问',
                            type:'bar',
                            barWidth: '60%',
                            data:[<c:forEach var="monthTrade" items="${requestScope.tradeMonthDetails}" varStatus="status">${monthTrade}<c:if test="${not status.last}">,</c:if></c:forEach> ],
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            </script>

            <script type="text/javascript">
                var dom = document.getElementById("year");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                var weatherIcons = {
                    'Sunny': './data/asset/img/weather/sunny_128.png',
                    'Cloudy': './data/asset/img/weather/cloudy_128.png',
                    'Showers': './data/asset/img/weather/showers_128.png'
                };

                option = {
                    title: {
                        text: '商品年度交易量情况统计',
                        subtext: '贵美数据',
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        // orient: 'vertical',
                        // top: 'middle',
                        bottom: 10,
                        left: 'center',
                        data: ['2015年','2016年', '2017年','2018年','2019年']
                    },
                    series : [
                        {
                            type: 'pie',
                            radius : '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data:[
                                <c:forEach var="yearTrade" items="${sessionScope.tradeYearDetails}" varStatus="status">
                                {
                                    value:${yearTrade.year_quantity},
                                    name: '${yearTrade.trd_year}年'
                                    /*label: {
                                        normal: {
                                            backgroundColor: '#eee',
                                            borderColor: '#777',
                                            borderWidth: 1,
                                            borderRadius: 4,
                                            rich: {
                                                title: {
                                                    color: '#eee',
                                                    align: 'center'
                                                },
                                                abg: {
                                                    backgroundColor: '#333',
                                                    width: '100%',
                                                    align: 'right',
                                                    height: 25,
                                                    borderRadius: [4, 4, 0, 0]
                                                },
                                                Sunny: {
                                                    height: 30,
                                                    align: 'left',
                                                    backgroundColor: {
                                                        image: weatherIcons.Sunny
                                                    }
                                                },
                                                Cloudy: {
                                                    height: 30,
                                                    align: 'left',
                                                    backgroundColor: {
                                                        image: weatherIcons.Cloudy
                                                    }
                                                },
                                                Showers: {
                                                    height: 30,
                                                    align: 'left',
                                                    backgroundColor: {
                                                        image: weatherIcons.Showers
                                                    }
                                                },
                                                weatherHead: {
                                                    color: '#333',
                                                    height: 24,
                                                    align: 'left'
                                                },
                                                hr: {
                                                    borderColor: '#777',
                                                    width: '100%',
                                                    borderWidth: 0.5,
                                                    height: 0
                                                },
                                                value: {
                                                    width: 20,
                                                    padding: [0, 20, 0, 30],
                                                    align: 'left'
                                                },
                                                valueHead: {
                                                    color: '#333',
                                                    width: 20,
                                                    padding: [0, 20, 0, 30],
                                                    align: 'center'
                                                },
                                                rate: {
                                                    width: 40,
                                                    align: 'right',
                                                    padding: [0, 10, 0, 0]
                                                },
                                                rateHead: {
                                                    color: '#333',
                                                    width: 40,
                                                    align: 'center',
                                                    padding: [0, 10, 0, 0]
                                                }
                                            }
                                        }
                                    }*/
                                }
                                <c:if test="${not status.last}">,</c:if></c:forEach>
                            ],

                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            </script>


</body>
</html>
